@import '~@huxy/styles/lib/common.less';
@import '~@common/layout/frame/config.less';

@rightNavWidth:200px;
@bannerWidth:220px;

.header{
  // background-color:#1665A7;
  // opacity:0.95;
  .header-wrap{
    max-width:@maxWidth;
    height:@headerHeight;
    line-height:@headerHeight;
    margin:0 auto;
    position:relative;
    // color:#fff;
    // box-shadow:0 0 3px 2px rgba(0,0,0,.1);
    // background:linear-gradient(to right,#31527e,#274366);
    /*a{
      color:#eee;
    }*/
    /*.collapseMenu{
      position:absolute;
      top:0;
      left:15px;
      width:30px;
      text-align:center;
      font-size:24px;
      cursor:pointer;
      display:none;
    }*/
    .banner{
      position:absolute;
      top:0;
      left:0;
      height:@headerHeight;
      width:@menuWidth;
      background-color:@bannerBgColor;
      .logo{
        position:absolute;
        height:100%;
        padding-left:15px;
        padding-right:10px;
        font-size:0;
        >img{
          height:48%;
          border-radius:50%;
        }
      }
      .title{
        // color:#f8f8f8;
        // padding-left:52px;
        padding-left:22px;
        padding-right:10px;
        font-size:1.8rem;
        font-weight:500;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }
    .nav{
      padding-left:@menuWidth;
      background-color:@navBgColor;
      color:#f0f0f0;
      .clear;
      >ul{
        // padding-left:25px;
        // padding-right:10px;
        margin:0;
        .collapseMenu{
          
        }
        &.nav-left{
          float:left;
          width:calc(100% - @rightNavWidth);
          >li{
            float:left;
          }
        }
        &.nav-right{
          float:right;
          width:@rightNavWidth;
          padding:0 10px;
          >li{
            float:right;
          }
        }
        >li{
          position:relative;
          user-select:none;
          >a{
            height:@headerHeight;
            display:block;
            text-align:center;
            cursor:pointer;
            padding:0 12px;
            position:relative;
            // font-size:14px;
            &:hover{
              // background-color:#f0f0f0;
              background-color:hsla(0,0%,0%,.08);
              // color:#f3f3f3;
            }
            &.active{
              /*background-color:#223857;
              color:#f3f3f3;
              &::after{
                position:absolute;
                content:'';
                width:100%;
                height:3px;
                left:0;
                bottom:0;
                border-radius:1px;
                background-color:#e7721c;
              }*/
            }
            >.menu-title{
              // display:inline-block;
              // font-size:14px;
              padding:0 8px;
            }
            .avatar{
              font-size:0;
              height:100%;
              img{
                position:relative;
                float:left;
                border-radius:50%;
                // top:28%;
                // height:44%;
                top:12px;
                height:calc(@headerHeight - 24px);
                width:calc(@headerHeight - 24px);
              }
              >span{
                display:inline-block;
                font-size:1.4rem;
                padding:0 6px;
              }
            }
          }
          /*&:hover{
            >ul{
              opacity:1;
              visibility:visible;
              z-index:111;
              transform:translate3d(0,6px,0);
              transition:all .2s;
            }
          }*/
          >ul{
            .arrow(@navBgColor,#f0f0f0,8px,16px);
            position:absolute;
            top:100%;
            right:0;
            width:135px;
            box-shadow:0 2px 6px rgba(0,0,0,.04);
            background-color:@navBgColor;
            padding:10px 0;
            opacity:0;
            visibility:hidden;
            z-index:-1;
            transform:translate3d(0,-20px,0);
            transition:all .2s;
            &.lt{
              right:auto;
              left:0;
            }
            &.rt{
              right:0;
              left:auto;
            }
            &.show{
              opacity:.95;
              visibility:visible;
              z-index:111;
              transform:translate3d(0,6px,0);
              transition:all .2s;
            }
            li{
              user-select:none;
              a{
                display:block;
                height:36px;
                line-height:36px;
                cursor:pointer;
                padding:0 15px;
                // color:#666;
                i,.anticon{
                  display:inline-block;
                  margin-right:10px;
                  // width:40px;
                  text-align:center;
                }
                &:hover{
                  background-color:#e6f7ff;
                  // color:#666;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width:1024px){
  .header{
    .header-wrap{
      .banner{
        display:none;
      }
      .nav{
        padding-left:30px;
      }
    }
  }
}

@media screen and (max-width:768px){
  .header{
    .header{
      .nav{
        .nav-left{
          display:none;
        }
        .nav-right{
          width:100%;
        }
      }
    }
  }
}










